<template>
	<view>
		<u-navbar title="超级交付" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#10191F" rightText="" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<!-- 车辆信息 -->
		<view class="car_v">
			<!-- 标题 -->
			<view class="title_v">
				<image src="../../static/icon/i_car1.png" mode=""></image>
				<text>厂商指导价</text>
			</view>
			<!-- 售价 -->
			<view class="price_v">
				<text>{{ data.market_price }}</text>
			</view>
			<image class="carlogo" :src="data.car_logo" mode="aspectFit"></image>
			<image class="bg1" src="../../static/image/car_bg.png" mode="aspectFill"></image>
			<image class="bg2" :src="data.cover" mode="aspectFit"></image>
		</view>
		<!-- 交付信息 -->
		<view class="delivery_v">
			<text class="lab_title">超级交付权益</text>

			<!-- 选择框 -->
			<!-- <view class="select_v" v-for="(item,index) in data.condition" :key="item.id">
				<image v-if="!item.is_selected" class="select_img" src="../../static/icon/car_pooling_check.png" mode=""></image>
				<image v-if="item.is_selected" class="select_img" src="../../static/icon/car_pooling_check_select.png" mode=""></image>
				<text v-if = "!item.is_selected" class="lab_tit">{{item.name}}</text>
				<text v-if = "item.is_selected" class="lab_tithig">{{item.name}}</text>
			</view> -->
			<!-- 提示 -->
			<text class="lab_hint">{{ data.prompt }}</text>
			<text class="lab_title" style="margin-bottom: 50rpx;">想要超级交付的用户请联系</text>
			<text class="lab_title" style="margin-bottom: 50rpx;">{{data.super_delivery_hotline}}</text>
		</view>
		<!-- 交付 -->
	<!-- 	<view class="submit_v" @click="submitClick">
			<text :disabled="isButtonDisabled" v-if="data.status == 0" >超级交付</text>
			<text class="lab_gray" v-else-if="data.status == 1" >等待交车</text>
			<text class="lab_gray" v-else-if="data.status == 2" >已交车</text>
		</view> -->
		
		<!-- 交易密码 -->
	<!-- 	<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false,isButtonDisabled=false" closeable bgColor="transparent">
			<view class="pass_box flex_ZC">
				<text class="pwd_tit">请输入交易密码</text>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#0071C7" focus class="code_input" v-model="securityPwd" mode="line" dot  ></u-code-input>
				<view class="pwd_box flex_ld">
					<text  class="pwd_box_btn flex_c"  @click="keyboardShow=false,securityPwd='',isButtonDisabled=false">取消</text>
					<text class="pwd_box_btn flex_c" @click="valChange()">确认</text>
				</view>
			</view>
		</u-popup> -->
		
		<!-- 规则说明 -->
		<!-- 提示框u-popup -->
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="prompt_tit">{{ rule_explain }}</text>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		superDelivery,
		superDeliveryIndex,
		carpoolingConfig
	} from "../../api/mycar.js"
	
	export default {
		data() {
			return {
				tipShow: false,
				keyboardShow: false,
				rule_explain: '',
				data: {},
				securityPwd:"",
				isButtonDisabled: false, // 按钮初始状态为可点击
				ids:""
			}
		},
		onShow() {
			// 获取详情数据
			this.getRequestData()
		},
		onLoad(opitons) {
			this.ids=opitons.id
			// 获取配置信息
			this.getConfig()
		},
		
		methods: {
			//返回
			leftClick() {
				uni.navigateBack();
			},
			//规则说明
			right(){
				this.tipShow = true
			},
			// 交付
			submitClick() {
				
				if (this.data.condition.every(item => item.is_selected === 1)) {
					if (this.data.status == 0) {
						if (this.isButtonDisabled) return; // 如果按钮已禁用，则不执行
						this.isButtonDisabled = true;
						this.securityPwd = ''
						this.keyboardShow = true
					}
				} else {
					uni.$u.toast("当前暂未满足前提条件")
				}
			},
			// 输入密码
			valChange() {
				if (this.securityPwd.length < 6) {
					uni.$u.toast("交易密码为6位")
				} else {
					// 提交申请
					this.submitRequest()
				}
			},
			// 支付
			submitRequest() {
				let data = {
					password:this.securityPwd
				}
				superDelivery(data).then(res => {
					this.isButtonDisabled = false;
					this.keyboardShow = false
					this.securityPwd = ''
					console.log(res);
					if (res.code == 1) {
						// 修改按钮状态为等待交车，取消点击交互事件
						uni.$u.toast(res.msg);
						uni.navigateTo({
							url: "/pagesMy/nationalCarPooling/myDelivery"
						})
					}
					
				})
			},
			
			// 获取数据
			getRequestData() {
				superDeliveryIndex({
					carpool_card_id:this.ids
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.data = res.data;
						console.log(this.data)
					}
				})
			},
			// 	配置信息
			getConfig() {
				carpoolingConfig().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.rule_explain = res.data.rule_explain;
					}
				})
			}
		},
	}
</script>

<style>
	page {
		background-color: #10191F;
	}
</style>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	/deep/ .u-navbar__content__title{
		color: #fff !important;
	}
	/deep/.uicon-arrow-left{
		color: #fff !important;
	}
	/deep/ .u-navbar__content__right__text {
		color: #ffffff;
	}
	
	.car_v {
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 26rpx;
		width: 750rpx;
		height: 546rpx;
		.carlogo{
			position: absolute;
			top: 40rpx;
			right: 50rpx;
			width: 80rpx;
			height: 60rpx;
		}
		.bg1 {
			position: absolute;
			top: -50rpx; 
			left: 50%;
			transform: translateX(-50%);
			width: 150%;
			height: 596rpx;
			z-index: 2;
		}
		.bg2 {
			position: absolute;
			top: 120rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 640rpx;
			height: 490rpx;
			z-index: 3;
		}
		.title_v {
			display: flex;
			// justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 28rpx;
			margin-top: 40rpx;
			>image {
				width: 21.6rpx;
				height: 21.6rpx;
				margin-left: 30rpx;
			}
			>text {
				font-size: 28rpx;
				color: #fff;
				margin-left: 2rpx;
			}
		}
		.price_v {
			display: flex;
			// align-items: center;
			width: 90%;
			height: 54rpx;
			margin-top: 6rpx;
			margin-left: 30rpx;
			background-image: url("../../static/image/car1.png");
			background-size: 218rpx 34rpx;
			background-position: left 0% bottom 0%;
			background-repeat: no-repeat;
			>text {
				margin-left: 18rpx;
				line-height: 48rpx;
				font-family: iconfont2;
				font-size: 48rpx;
				color: #26A4F2;
				margin-top: 0rpx;
			}
		}
	}
	
	.delivery_v{
		display: flex;
		flex-direction: column;
		width: 690rpx;
		// height: 524rpx;
		margin: 0 auto;
		margin-top: 0rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		>text {
			color: #fff;
			text-align: center;
		}
		.lab_title {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			font-size: 44rpx;
			font-family: iconfont2;
		}
		.lab_title2 {
			line-height: 52rpx;
			margin: 0 auto;
			margin-top: 34rpx;
			margin-left: 62rpx;
			font-size: 32rpx;
		}
		.select_v {
			display: flex;
			align-items: center;
			margin-top: 26rpx;
			width: 100%;
			height: 52rpx;
			.select_img {
				width: 38rpx;
				height: 34rpx;
				margin-left: 74rpx;
			}
			>text {
				font-size: 30rpx;
				margin-left: 12rpx;
			}
			.lab_tit {
				color: #fff;
			}
			.lab_tithig {
				color: #9FA3A5;
			}
		}
		.lab_hint {
			width: 606rpx;
			margin: 0 auto;
			margin-top: 56rpx;
			margin-bottom: 68rpx;
			font-size: 28rpx;
			color: #CFD1D2;
			text-align: center;
		}
	}
	.submit_v {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 36rpx;
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
		>text {
			font-size: 36rpx;
			color: #fff;
			margin: 0 auto;
		}
		.lab_gray {
			color: #9FA3A5;
		}
	}
	
	.pass_box {
		width: 602rpx;
		height: 406rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 20rpx;
		z-index: 8;
		.pwd_tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #ffffff;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
		
		.code_input {
			margin: 0 auto;
		}
		
		.pwd_box {
			width: 522rpx;
			height: 72rpx;
			margin: 0 auto;
			margin-top: 50rpx;
		}
		
		.pwd_box_btn {
			width: 220rpx;
			height: 72rpx;
			border-radius: 12rpx;
			box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
	.prompt {
		position: relative;
		width: 656rpx;
		min-height: 568rpx;
		background: #111B23;
		margin: 0 auto;
		color: #111B23;
		padding-top: 30rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	
		.prompt_tit {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 540rpx;
			height: 450rpx;
			font-size: 30rpx;
			color: #CFD1D3;
			text-align: center;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			// -webkit-line-clamp: 2;
			overflow: hidden;
			// 更多内容显示滚动
			overflow-y: auto;
		}
	}
	
	
	

</style>